<template>
  <div v-if="checkMenuPermission(menu.id)">
    <div
      v-if="!menu.children"
      @click="goTo(menu)"
      :class="{ active: isActive(menu.path) }"
    >
      <el-menu-item>
        <svg-icon
          :icon-class="menu.icon"
          style="color: #4c565c"
          font-size="20"
        ></svg-icon>
        <span slot="title">{{ menu.title }}</span>
      </el-menu-item>
    </div>
    <el-submenu v-else :index="menu.title">
      <template slot="title">
        <svg-icon
          :icon-class="menu.icon"
          style="color: #4c565c"
          font-size="20"
        ></svg-icon>
        <span>{{ menu.title }}</span>
      </template>
      <menu-item
        v-for="(item, index) in menu.children"
        :key="index"
        :menu="item"
      >
        <svg-icon
          :icon-class="item.icon"
          style="color: #4c565c"
          font-size="20"
        ></svg-icon>
        <span slot="title">{{ item.title }}</span>
      </menu-item>
    </el-submenu>
  </div>
</template>

<script>
import { checkMenuById } from '@/utils/menu/menu'
export default {
  name: 'menuItem',
  props: {
    menu: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    isActive(path) {
      return this.$route.path.match(path)
    },
    goTo(menu) {
      this.$router.push({ path: menu.path })
    },
    checkMenuPermission(id) {
      return checkMenuById(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: rgba(234, 245, 253, 1);
  border-right: 3px solid #4a80a3;
  color: #497fa3;
  ::v-deep .el-menu-item {
    color: #497fa3;
  }
}
</style>
